<template>
	<view class="container">
		
		<view class="bg" :style="{backgroundImage: 'url('+ $util.img('image/mall_submit_bg.png') +')'}">
		</view>
		<u-navbar
		     :title="title"
		     @rightClick="goBack()"
		     :autoBack="true"
		     bgColor="transparent"
		     color="#ffffff"
		     leftIconColor="#232940"
		     :titleStyle="titleStyle"
		     :placeholder="true"
		 >
		 </u-navbar>
		 
		<view class="options rel">
			<view class="m-b-20  p-l-30 p-r-30 flex-x-between">
			  <view class="c-base">
			    <text class="text-bold m-r-14 font-30">我的档案</text>
			    <text class="font-24">定期检查更新身体状况</text>
			  </view>
			  <view class="flex-y-center c-base" >
			    <text class="font-24 m-r-4">历史档案</text>
			    <!-- <u-icon name="arrow-right" color="#fff" size="14"></u-icon> -->
			  </view>
			</view>
			<view class="fill-base radius-20 p-30" @click="$util.redirectTo('/otherpages/health/fileDetail')">
				<view class="flex-y-center">
					<image :src="$util.img(userInfo.headimg)" mode="" class="avatar m-r-20" v-if="userInfo.headimg"></image>
						<image :src="$util.img('image/avatar.png')" mode="" class="avatar m-r-20" v-else></image>
					<view class="flex-1">
						<view class="font-30 text-bold">{{profileInfo.user_name}}</view>
						<view class="font-24 color-title2">档案更新于：{{profileInfo.last_time?profileInfo.last_time:''}}</view>
					</view>
					<u-icon name="arrow-right" color="#788096" size="14"></u-icon>
				</view>
				<view class="p-l-100">
					<view class="flex-warp" v-for="(item,index) in profileInfo.profile" :key="index">
						<view class="font-24 flex-1 flex-y-baseline" style="width: 50%;" v-for="(opitem,opindex) in item" :key="opindex">
							<text class="c-77 m-r-24">{{opitem.name}}</text>{{opitem.value}}{{opitem.default_unit}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="text-bold flex-y-center rel font-30 m-r-24" >
			<text class="line"></text>
			历史记录
			<!-- <view class="bi">
				档案对比
				<u-icon name="arrow-right" color="#fff" size="14"></u-icon>
			</view> -->
		</view>
		
		 <view class="records-container">
		  <view class="record-item" v-for="(item, index) in historyList" :key="index" @click="$util.redirectTo('/otherpages/health/historyRecordDetail?id='+item.id)">
			<view class="record-line">
			  <view class="record-dot iconfont">&#xe6c7;</view>
			  <view class="record-content-wrapper">
				<view class="record-header">
					<view>指标来源：{{item.device_name}}</view>
				    <view class="update-time">档案更新于：{{$util.timeStampTurnTime(item.update_time)}}</view>
				</view>
				<view class="record-content">
				  <view class="info-row" v-for="(items,indexs) in item.profile" :key="indexs" v-if="indexs<2">
					<view class="font-24 flex-1 flex-y-baseline" v-for="(opitem,opindex) in items" :key="opindex">
						<text class="c-77 m-r-24">{{opitem.name}}</text>
						<text class="ellipsis" style="width:150rpx;display:inline-block;">{{opitem.value}}</text>
					</view>
				  </view>
				</view>
			  </view>
			</view>
		  </view>
		</view>
		
		<fileComparison :show="showComparison" @close="showComparison = false"></fileComparison>
		 
	</view>
</template>

<script>
	import fileComparison from '../../components/fileComparison/fileComparison.vue'
	export default {
		components: {
			fileComparison
		},
		data() {
			return {
				isIphoneX: false, //判断手机是否是iphoneX以上
				titleStyle: {
				  'color': '#ffffff'
				},
				title: '',
				records: [
				// 这里模拟多条记录，实际可从接口获取
				{
				  height: '170cm',
				  weight: '60kg',
				  bloodPressure: '90mmHg',
				  heartRate: '75次/分钟'
				},
				{
				  height: '170cm',
				  weight: '60kg',
				  bloodPressure: '90mmHg',
				  heartRate: '75次/分钟'
				},
				{
				  height: '170cm',
				  weight: '60kg',
				  bloodPressure: '90mmHg',
				  heartRate: '75次/分钟'
				}
			  ],
			  showComparison: false,
			  profileInfo: {},
			  userInfo: {},
			  page: 1,
			  historyList: [],
				

			}
		},
		onLoad() {
			this.isIphoneX = this.$util.uniappIsIPhoneX()
			if(uni.getStorageSync('token')) {
				this.userInfo = uni.getStorageSync('userInfo') || {};
				this.getHealthData();
			}
			this.getHistoryData();
		},
		onReachBottom() {
			// this.page++
			// this.getHistoryData();

		},
		methods: {
			getHealthData() {
				this.$api.sendRequest({
			      url: "/api/userHealth/index",
			      data: {},
			      success: res => {
			        if(res.code == 0 && res.data) {
						let data = res.data;
						
						const profileInfo = data.profile;

						const chunkedArray = profileInfo.reduce((result, current, index, array) => {
						if (index % 2 === 0) {
							result.push(array.slice(index, index + 2));
						}
						return result;
						}, []);
						this.profileInfo = data;
						this.profileInfo.profile = chunkedArray;

						console.log(chunkedArray);

			        }else {
						// this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
			getHistoryData() {
				this.$api.sendRequest({
			      url: "/api/userHealth/getHistory",
			      data: {
					page: this.page,
					page_size: 30
				  },
			      success: res => {
			        if(res.code == 0) {
						if(this.page == 1) this.historyList = [];
						this.historyList = this.historyList.concat(res.data.list);

						this.historyList.forEach(item => {
							item.profile = this.filterData(item.profile);
						})
						console.log(this.historyList);

			        }else {
						this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
			filterData(profileInfo) {
				const chunkedArray = profileInfo.reduce((result, current, index, array) => {
					if (index % 2 === 0) {
						result.push(array.slice(index, index + 2));
					}
					return result;
				}, []);
				return chunkedArray;
			},
		}
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
.bg {
	position: absolute;
	top: 0;
	width: 750rpx;
	height: 316rpx;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: cover;
}
.options {
  background: $color-title2;
  border-radius: 20rpx;
  margin: 0 24rpx 30rpx;
  padding: 20rpx 0 0;
  border: 2rpx solid $color-title2;
  .avatar {
	  width: 80rpx;
	  height: 80rpx;
	  border-radius: 50%;
  }
}

.line {
	display: inline-block;
	width: 7rpx;
	height: 30rpx;
	border-radius: 0 10rpx 10rpx 0;
	background: $color-title2;
	margin-right: 18rpx;
}
.bi {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 163rpx;
	height: 47rpx;
	background: $color-title2;
	font-size: 26rpx;
	color: #fff;
	margin-left: auto;
	border-radius: 30rpx;
}

.records-container {
  margin: 0 24rpx 0 72rpx;
  position: relative;
  .record-line {
    display: flex;
    position: relative;
  }
  .record-dot {
    // width: 10px;
    // height: 10px;
    // border-radius: 50%;
    // background-color: #07c160;
	color: $color-title2;
    position: absolute;
    left: -60rpx;
    top: 4rpx;
    z-index: 2;
  }
  .record-dot::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 296rpx;
    background-color: #e7e8eb;
    top: 23px;
    left: 8px;
    z-index: 1;
  }
  // .record-item:last-child .record-dot::after {
  //   display: none;
  // }
  
  .record-item {
    padding: 10px;
    margin-bottom: 10px;
    position: relative;
	.record-content-wrapper {
	  flex: 1;
	}
  }
  .record-header {
    margin-bottom: 5px;
	.update-time {
	  font-size: 24rpx;
	  color: #666;
	}
  }
  
  .record-content {
    display: flex;
    flex-direction: column;
    background: #F7F7F7;
    padding: 30rpx 40rpx;
    border-radius: 20rpx;
	border-left: 2px solid $color-title2;
	.info-row {
	  display: flex;
	  margin-bottom: 5px;
	}
  }
  
  
}



</style>
